Vue.component('operator-home-content', {
  data() {
    return {
      statistics: {
        total_products: 0,
        total_stock_value: 0,
        low_stock_count: 0,
        today_stock_in: 0,
        today_stock_out: 0,
        today_stock_in_amount: 0,
        today_stock_out_amount: 0
      }
    };
  },
  methods: {
    formatMoney(amount) {
      return Number(amount).toLocaleString();
    },
    async loadStatistics() {
      try {
        const response = await statisticsAPI.getDashboardStatistics();
        if (response.data) {
          this.statistics = response.data;
        }
      } catch (error) {
        console.error('获取统计数据失败:', error);
        this.$message.error(error.message || '获取统计数据失败');
      }
    },
    navigateTo(path) {
      window.location.href = path;
    }
  },
  async mounted() {
    await this.loadStatistics();
  },
  template: `
    <div style="padding: 20px;">
      <h1 style="font-size: 24px; font-weight: 600; color: #2c3e50; margin-bottom: 20px;">欢迎使用库存管理系统</h1>
      
      <!-- 统计卡片 -->
      <el-row :gutter="20" style="margin-bottom: 20px;">
        <el-col :span="8">
          <el-card style="box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);">
            <div style="display: flex; align-items: center; gap: 16px;">
              <div style="width: 48px; height: 48px; background-color: #409EFF; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px;">
                <i class="el-icon-box"></i>
              </div>
              <div>
                <div style="font-size: 20px; font-weight: 700; color: #2c3e50; margin-bottom: 4px;">¥{{ formatMoney(statistics.total_stock_value) }}</div>
                <div style="font-size: 14px; color: #6c757d;">库存总价值</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card style="box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);">
            <div style="display: flex; align-items: center; gap: 16px;">
              <div style="width: 48px; height: 48px; background-color: #E6A23C; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px;">
                <i class="el-icon-warning"></i>
              </div>
              <div>
                <div style="font-size: 20px; font-weight: 700; color: #2c3e50; margin-bottom: 4px;">{{ statistics.low_stock_count }}</div>
                <div style="font-size: 14px; color: #6c757d;">低库存商品</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card style="box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);">
            <div style="display: flex; align-items: center; gap: 16px;">
              <div style="width: 48px; height: 48px; background-color: #67C23A; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px;">
                <i class="el-icon-goods"></i>
              </div>
              <div>
                <div style="font-size: 20px; font-weight: 700; color: #2c3e50; margin-bottom: 4px;">{{ statistics.total_products }}</div>
                <div style="font-size: 14px; color: #6c757d;">商品总数</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 今日统计 -->
      <el-row :gutter="20" style="margin-bottom: 20px;">
        <el-col :span="12">
          <el-card style="box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);">
            <div slot="header" style="font-weight: 600; color: #2c3e50;">
              <span>今日入库</span>
            </div>
            <div style="padding: 10px 0;">
              <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0f0f0;">
                <span style="font-size: 14px; color: #6c757d;">数量：</span>
                <span style="font-size: 16px; font-weight: 600; color: #2c3e50;">{{ statistics.today_stock_in }}</span>
              </div>
              <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px 0;">
                <span style="font-size: 14px; color: #6c757d;">金额：</span>
                <span style="font-size: 16px; font-weight: 600; color: #2c3e50;">¥{{ formatMoney(statistics.today_stock_in_amount) }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card style="box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);">
            <div slot="header" style="font-weight: 600; color: #2c3e50;">
              <span>今日出库</span>
            </div>
            <div style="padding: 10px 0;">
              <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0f0f0;">
                <span style="font-size: 14px; color: #6c757d;">数量：</span>
                <span style="font-size: 16px; font-weight: 600; color: #2c3e50;">{{ statistics.today_stock_out }}</span>
              </div>
              <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px 0;">
                <span style="font-size: 14px; color: #6c757d;">金额：</span>
                <span style="font-size: 16px; font-weight: 600; color: #2c3e50;">¥{{ formatMoney(statistics.today_stock_out_amount) }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 快速操作 -->
      <el-card style="box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);">
        <div slot="header" style="font-weight: 600; color: #2c3e50;">
          <span>快速操作</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-button type="success" icon="el-icon-upload" @click="navigateTo('/operator/stock-in')" style="width: 100%;">
              商品入库
            </el-button>
          </el-col>
          <el-col :span="8">
            <el-button type="warning" icon="el-icon-download" @click="navigateTo('/operator/stock-out')" style="width: 100%;">
              商品出库
            </el-button>
          </el-col>
          <el-col :span="8">
            <el-button type="info" icon="el-icon-box" @click="navigateTo('/operator/inventory')" style="width: 100%;">
              查看库存
            </el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>
  `
});
